import {Row, Col, Card, Badge, Icon, Tag} from 'antd'
import React, {Component} from 'react'
import {Link} from 'react-router-dom'
import {moment} from '../../common/js/utils'
import MiniPlayer from '../../component/mini_player'
import 'dplayer/dist/DPlayer.min.css'

const color = ['magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple']

function getColors(key) {
  return color[key % (color.length - 1)]
}

export default class MovieCard extends Component {

  render() {
    let {movies} = this.props
    return (
      <Row style={{padding: 30}}>
        {
          movies.map(item => (
            <Col xl={{span: 4}} lg={{span: 6}} md={{span: 8}} sm={{span: 12}} key={item._id} style={{padding: 10}}>
              <Card
                bordered={true}
                hoverable
                actions={[
                  <Badge>
                    <Icon style={{marginRight: '2px'}} type="clock-circle" />
                    {moment(item.meta.createdAt).fromNow(true)}前更新
                  </Badge>,
                  <Badge>
                    <Icon style={{marginRight: '2px'}} type="star" />
                    {item.rate} 分
                  </Badge>
                ]}
                cover={<div style={{
                  width: '100%',
                  height: 0,
                  padding: '70% 0',
                  overflow: 'hidden'
                }}>
                  <img style={{
                    margin: '-70% 0 0 0',
                    width: '100%'
                  }} onClick={() => this.player.showModal(item)} className="common-hover" src={item.poster} alt={item.title} title='点击海报播放预告片' />
                </div>}
              >
                <Card.Meta
                  style={{
                    height: 75,
                    overflow: 'hidden'
                  }}
                  title={<Link
                    to={`/detail/${item._id}`} style={{
                    color: '#333'
                  }} title={`${item.title}（${moment(item.pubdate).format('YYYY-MM')}）`}>{item.title}（{moment(item.pubdate).format('YYYY-MM')}）</Link>}
                  description={<Link to={`/detail/${item._id}`} style={{
                    color: '#666'
                  }} title={item.summary} >{item.summary}</Link>}
                />
                <div
                  style={{
                    padding: '8px 0 0 0',
                    whiteSpace: 'nowrap',
                    background: '#fff'
                  }}
                >
                  {
                    (() => {
                      let ram = Math.floor(Math.random() * 10)
                      return item.movieTypes.map((item, key) => (
                        <Tag key={key} color={getColors(ram + key)} title={item} >{item}</Tag>
                      ))
                    })()
                  }
                </div>
              </Card>
            </Col>
          ))
        }
        <MiniPlayer
          onRef={c => this.player = c}
        />
      </Row>
    )
  }
}
